<template>
  <div class="program-container">
    <div class="page-header">
      <h2>节目管理</h2>
      <el-button type="primary" @click="handleAdd">新增节目</el-button>
    </div>
    <div class="page-content">
      <!-- 搜索表单 -->
      <el-form :inline="true" class="search-form">
        <el-form-item label="节目名称">
          <el-input v-model="searchForm.name" placeholder="请输入节目名称" clearable />
        </el-form-item>
        <el-form-item label="展演名称">
          <el-select v-model="searchForm.performance" placeholder="请选择展演" clearable>
            <el-option label="2024年春季音乐会" value="P001" />
            <el-option label="钢琴专场演出" value="P002" />
          </el-select>
        </el-form-item>
        <el-form-item label="节目类型">
          <el-select v-model="searchForm.type" placeholder="请选择类型" clearable>
            <el-option label="钢琴独奏" value="piano_solo" />
            <el-option label="小提琴独奏" value="violin_solo" />
            <el-option label="声乐独唱" value="vocal_solo" />
            <el-option label="重奏" value="ensemble" />
            <el-option label="合唱" value="chorus" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="节目编号" width="120" />
        <el-table-column prop="name" label="节目名称" min-width="180" />
        <el-table-column prop="performance" label="展演名称" min-width="180" />
        <el-table-column prop="type" label="节目类型" width="120" />
        <el-table-column prop="duration" label="演出时长" width="100">
          <template #default="scope">
            {{ scope.row.duration }}分钟
          </template>
        </el-table-column>
        <el-table-column prop="performers" label="演出人员" min-width="150" />
        <el-table-column prop="institution" label="报名机构" min-width="150" />
        <el-table-column prop="sequence" label="演出顺序" width="100">
          <template #default="scope">
            <el-input-number 
              v-model="scope.row.sequence" 
              :min="1" 
              controls-position="right"
              @change="handleSequenceChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增节目' : '编辑节目'"
      width="600px"
    >
      <el-form :model="programForm" label-width="100px">
        <el-form-item label="节目名称" required>
          <el-input v-model="programForm.name" placeholder="请输入节目名称" />
        </el-form-item>
        <el-form-item label="展演名称" required>
          <el-select v-model="programForm.performance" placeholder="请选择展演" style="width: 100%">
            <el-option label="2024年春季音乐会" value="P001" />
            <el-option label="钢琴专场演出" value="P002" />
          </el-select>
        </el-form-item>
        <el-form-item label="节目类型" required>
          <el-select v-model="programForm.type" placeholder="请选择类型" style="width: 100%">
            <el-option label="钢琴独奏" value="piano_solo" />
            <el-option label="小提琴独奏" value="violin_solo" />
            <el-option label="声乐独唱" value="vocal_solo" />
            <el-option label="重奏" value="ensemble" />
            <el-option label="合唱" value="chorus" />
          </el-select>
        </el-form-item>
        <el-form-item label="演出时长" required>
          <el-input-number 
            v-model="programForm.duration" 
            :min="1" 
            :max="60"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="演出人员" required>
          <el-input v-model="programForm.performers" placeholder="请输入演出人员姓名，多人用逗号分隔" />
        </el-form-item>
        <el-form-item label="报名机构" required>
          <el-select v-model="programForm.institution" placeholder="请选择机构" style="width: 100%">
            <el-option label="音乐学院" value="音乐学院" />
            <el-option label="艺术学院" value="艺术学院" />
          </el-select>
        </el-form-item>
        <el-form-item label="演出顺序">
          <el-input-number 
            v-model="programForm.sequence" 
            :min="1"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input 
            v-model="programForm.remark" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单数据
const searchForm = reactive({
  name: '',
  performance: '',
  type: ''
})

// 表格数据
const tableData = ref([
  {
    id: 'PG001',
    name: '月光奏鸣曲',
    performance: '2024年春季音乐会',
    type: 'piano_solo',
    duration: 15,
    performers: '王小明',
    institution: '音乐学院',
    sequence: 1,
    remark: '贝多芬作品'
  },
  {
    id: 'PG002',
    name: '梁祝',
    performance: '2024年春季音乐会',
    type: 'violin_solo',
    duration: 20,
    performers: '李小红',
    institution: '艺术学院',
    sequence: 2,
    remark: '小提琴协奏曲'
  }
])

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref('add')
const programForm = reactive({
  name: '',
  performance: '',
  type: '',
  duration: 10,
  performers: '',
  institution: '',
  sequence: 1,
  remark: ''
})

// 方法
const handleSearch = () => {
  console.log('搜索条件：', searchForm)
}

const resetForm = () => {
  searchForm.name = ''
  searchForm.performance = ''
  searchForm.type = ''
}

const handleAdd = () => {
  dialogType.value = 'add'
  Object.assign(programForm, {
    name: '',
    performance: '',
    type: '',
    duration: 10,
    performers: '',
    institution: '',
    sequence: 1,
    remark: ''
  })
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogType.value = 'edit'
  Object.assign(programForm, row)
  dialogVisible.value = true
}

const handleView = (row) => {
  ElMessage('查看节目详情：' + row.name)
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定删除节目"${row.name}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = tableData.value.indexOf(row)
    tableData.value.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const handleSave = () => {
  // 这里应该添加表单验证
  if (dialogType.value === 'add') {
    tableData.value.push({
      id: 'PG' + (tableData.value.length + 1).toString().padStart(3, '0'),
      ...programForm
    })
    ElMessage.success('添加成功')
  } else {
    // 更新现有数据
    const index = tableData.value.findIndex(item => item.id === programForm.id)
    if (index !== -1) {
      Object.assign(tableData.value[index], programForm)
      ElMessage.success('更新成功')
    }
  }
  dialogVisible.value = false
}

const handleSequenceChange = (row) => {
  console.log('更新节目顺序：', row)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped lang="scss">
.program-container {
  padding: 20px;

  .page-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .search-form {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 